import React, { useState, useEffect } from 'react';
import { useMemo } from 'react';
// 只能在函数组件或是hook函数中使用自定义hook
function App (){
  const [count1,setCount1] = useCustomHook1();
  const count2 = useCustomHook2(count1);

  useEffect(()=>{
    console.log('useEffect 3',count1,count2)
},[]);

  return(
    <div>
     <p>{count1}</p>
     <button onClick={() => setCount1(count1 + 1)}>click setCount</button>
     <p>{count2}</p>
    </div>
  )
}

function useCustomHook1(){
  const [count,setCount] = useState(1)

  useEffect(()=>{
      console.log('useEffect 1',count)
  },[]);

  return [count,setCount]
}

function useCustomHook2(count1){
  const [count,setCount] = useState(count1);

  const memoCount = useMemo(()=>{
    console.log('memoCount 2',count1);
    return count1;
  },[count1])

  useEffect(()=>{
      console.log('useEffect 2',count,memoCount)
  },[]);

  return [count]
}


export default App